(function(window){
	function $(selector){
		var el;
		if(/#/.test(selector))
			el = document.getElementById(selector.substring(1));
		else if(/\./.test(selector))
			el = document.getElementsByClassName(selector.substring(1))[0];
		else if(/^<\w+>$/.test(selector)){
			el = document.createElement(selector.substring(1,selector.length-1));
		}
		return el;
	}
	window.$ = $;

})(window);

(function(window){
	/**
	 * [Table description]
	 * @param {[Array]} data 表格的初始数据以二维数组的形式
	 * @param {[bool]} flag 是否计算总和，如需要传true，表头的最后一个标题是总和的标题
	 */
	function Table(data,flag){
		if(data !== undefined){
			this.data = data;
		}
		else{
			this.data = [
				['姓名','数学','语文','英语','总分'],
				['大毛',25,65,45],
				['二毛',75,45,48],
				['三毛',65,22,68],
				['四毛',45,99,71],
				['五毛',35,44,62],
				['六毛',15,69,34],
				['七毛',12,32,38],
				['八毛',75,58,48],
				['九毛',84,75,27]
			];
		}
		this.flag = flag === undefined ? true : flag;
		this.span = [];
		this.init();
	}
	Table.prototype = {
		constructor: Table,
		init: function(){
			this.data = this._setData();
			this.createDom();
			this.create_sort_button();
			this.add_event();
			this.fixed_top();
		},
		fixed_top: function(){
			var self = this;
			this.top = this.table.children[0];
			window.onscroll = function(self){
				return function(){
					var t = document.documentElement.scrollTop || document.body.scrollTop; 
					var t1 = self.table.offsetTop;
					if(t > t1){
						self.top.style.position = 'fixed';
						self.top.style.top = 0;
						if(t1+self.table.clientHeight < t){
							self.top.style.display = 'none';
						}else{
							self.top.style.display = 'table-row';
						}
					}else{
						self.top.style.position = 'inherit';
					}

				}
			}(self);
		},
		_setData: function(){//初始化数据
			
			if(this.flag){
				var temp;
				for(var i = 1; i < this.data.length; i++){
					temp = 0;
					for(var j = 1; j < this.data[i].length; j++){
						temp += this.data[i][j];
					}
					this.data[i].push(temp);
				}
			}
			return this.data;
		},
		createDom: function(){//创建节点
			this.table = $('<table>');
			for(var i = 0; i < this.data.length; i++){
				this.table.appendChild($('<tr>'));
				for(var j = 0; j < this.data[i].length; j++){
					this.table.children[i].appendChild($('<td>'));
				}
			}
			for(i = 0; i < this.table.children.length; i++){
				for(j = 0; j < this.table.children[i].children.length; j++){
					this.table.children[i].children[j].innerHTML = this.data[i][j];
				}
			}
			document.body.appendChild(this.table);
		},
		render: function(arr){
			
			for(i = 1; i < this.table.children.length; i++){
				for(j = 0; j < this.table.children[i].children.length; j++){
					this.table.children[i].children[j].innerHTML = arr[i-1][j];
				}
			}
		},
		create_sort_button: function(){//创建排序按钮
			var temp = this.table.children[0].children;
			
			for(var i = 1; i < temp.length; i++){
				var span = $('<span>');
				span.style.cursor = 'pointer';
				span.style.display = 'inline-block';
				span.style.height = 0;
				span.style.width = 0;
				span.style.border = '5px solid transparent';
				span.style.borderTopColor = 'red';
				temp[i].appendChild(span);
				this.span.push(span);
			}
		},
		add_event: function(){
			var self = this;
			for(var i = 0; i < this.span.length; i++){
				this.span[i].onclick = (function(i,self){
					return function(e){
						var temp1 = self.data.slice(1);
						temp1.sort(function(a, b){
							return b[i] - a[i]; 
						});
						self.render(temp1);
					};
				})(i+1,self);
			}
		},
	};

	window.Table = Table;
})(window);